<template>
    <view>
        <view class="index">
            <!-- 头像 -->
            <view class="avatar">
                <view class="avatar-box">
                    <u-image width="120rpx" height="120rpx" :src="myInfoVo.avatar" @click="handleAvatar"
                             v-if="myInfoVo.avatar" shape="circle"></u-image>
                    <u-image width="120rpx" height="120rpx" src="/static/img/avatar.png" @click="handleAvatar"
                             shape="circle" v-else></u-image>
                    <view class="userId">
                        <view class="phonenumber" @click="handleAvatar"> {{ userInfo.nickName }}</view>
                        <!--            <view class="info"> 专业鉴别 快速准确 </view>-->

                        <!--              <view class="dis_f_l_c m_t_5" >
                                          <view class="m_r_5 f_s_12 c_9">打手ID: {{userInfo.userId || ""}}</view>
                                          <view @click="copy(userInfo.userId)">
                                              <u-image src="/static/img/copy.png" width="30rpx" height="30rpx" ></u-image>
                                          </view>
                                      </view>-->
                        <view class="dis_f_l_c m_t_5">
                            <view class="m_r_5 f_s_12 c_9">打手简介: {{ userInfo.info || "" }}</view>
<!--                            <view class="c_red f_s_12" @click="handleShowInfo">
                                <u-button type="error" size="mini">{{ userInfo.info ? '修改' : '添加' }}</u-button>
                            </view>-->
                            <view @click="handleShowInfo">
                                <u-icon name="edit-pen" size="24"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 钱包 -->
                <view>
                    <u-grid :border="true" col="2">
                        <u-grid-item @click="handleCashRecord">
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                <text style="font-size: 20rpx;">¥</text>
                                {{ userInfo.amount }}
                            </view>
                            <view style="color: #999;font-size: 24rpx;">我的钱包</view>
                        </u-grid-item>
                        <u-grid-item @click="showQrCode = true">
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                <u-image width="40rpx" height="40rpx" src="/static/img/qrcode.png"></u-image>
                            </view>
                            <view style="color: #999;font-size: 24rpx;">邀请码</view>
                        </u-grid-item>
                    </u-grid>
                    <view>
                        <u-popup :show="showQrCode" @close="showQrCode=false" mode="center" :round="10"
                                 :safeAreaInsetBottom="false">
                            <view style="padding: 30rpx;">
                                <u-image width="300rpx" height="300rpx" :src="myInfoVo.qrCodeUrl"></u-image>
                            </view>
                        </u-popup>
                    </view>
                </view>
            </view>
            <!-- 我的订单 -->
            <view class="order">
                <view class="title">我的任务</view>
                <u-grid :border="false" col="4">
                    <u-grid-item v-for="(listItem,listIndex) in orderTab" :key="listIndex"
                                 @click="handleOrder(listIndex)">
                        <view style="position: relative;">
                            <u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.imgUrl" :size="20"></u-icon>
                            <view style="position: absolute;top:0;right: -12rpx" v-if="listIndex==1">
                                <u-badge :value="myInfoVo.dsOrder5"></u-badge>
                            </view>
                            <view style="position: absolute;top:0;right: -12rpx" v-if="listIndex==2">
                                <u-badge :value="myInfoVo.dsOrder6"></u-badge>
                            </view>
                        </view>
                        <text class="grid-text">{{ listItem.name }}</text>
                    </u-grid-item>
                </u-grid>
            </view>
            <!-- 客服 -->
            <view class="order">
                <view style="height: 6rpx"></view>
                <view class="kefu" @click="showPhone = true">
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/phone1.png"></u-image>
                        <text style="margin-left: 16rpx;">客服电话</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
                <view style="height: 6rpx"></view>
                <!--        <view class="kefu">
                          <view class="kefu-left">
                            <u-image width="38rpx" height="38rpx" src="/static/img/kefu1.png"></u-image>
                            <u-button customStyle="border: #999999 0 dashed;font-size: 30rpx;padding: 0 8px;height: unset" open-type="contact">在线客服</u-button>
                          </view>
                          <u-icon name="arrow-right"></u-icon>
                        </view> -->
                <view class="kefu" @click="goKf">
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/kefu1.png"></u-image>
                        <text style="margin-left: 16rpx;">在线客服</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
                <view style="height: 6rpx"></view>
                <view class="kefu" @click="showAudit = true">
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/qb1.png"></u-image>
                        <text style="margin-left: 16rpx;">钱包提现</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
                <view style="height: 6rpx"></view>
                <view class="kefu" @click="handleSubscribe">
                    <view class="kefu-left">
                        <u-image width="42rpx" height="42rpx" src="/static/img/通知.png"></u-image>
                        <text style="margin-left: 16rpx;">订阅订单通知</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
                <view style="height: 6rpx"></view>
                <view class="kefu" @click="goMine">
                    <view class="kefu-left">
                        <u-image width="38rpx" height="38rpx" src="/static/img/settled1.png"></u-image>
                        <text style="margin-left: 16rpx;">返回个人中心</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
            </view>
        </view>
        <u-popup :show="showPhone" @close="showPhone = false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view class="qrcode" style="margin: 40rpx;" @click="handleCall">
                <view class="phone">
                    <u-icon :customStyle="{paddingTop:10+'rpx'}" name="phone" :size="18"></u-icon>
                    <text>{{ phone }}</text>
                </view>
                <text class="desc">点击拨打客服电话</text>
            </view>
        </u-popup>
        <u-popup :show="showInfo" @close="showInfo = false" mode="bottom" :round="10" :safeAreaInsetBottom="false">
            <view class="p_a_20">
                <view class="dis_f_c_c m_b_10">简介</view>
                <u--textarea v-model="info" placeholder="请输入内容"></u--textarea>
                <view class="m_t_20 m_b_10">
                    <u-button type="primary" @click="handleInfoConfirm">确定</u-button>
                </view>
            </view>
        </u-popup>
        <!-- 提现弹窗 -->
        <!-- <u-modal :show="showAudit" title="提现" :showCancelButton="true" @confirm="handleConfirm" @cancel="showAudit = false">
          <u--form labelPosition="left" :model="cash" ref="uForm" :rules="rules">
            <u-form-item label="账号" prop="alipay" ref="item1">
              <u--input v-model="cash.alipay" placeholder="请输入支付宝收款账号"></u--input>
            </u-form-item>
            <u-form-item label="金额" prop="balance" ref="item2">
              <u--input v-model="cash.balance" placeholder="请输入提现金额"></u--input>
            </u-form-item>
          </u--form>
        </u-modal> -->
        <!-- 用户昵称和图像 -->
        <s-wx-auth ref="authRef" @getMyInfo="getMyInfo"></s-wx-auth>
        <s-tixian :show="showAudit" :balance="myInfoVo.amount" @refresh="getMyInfo" @close="showAudit = false;"/>
    </view>
</template>

<script>
import {getMyInfoApi, getByKeyApi, auditApi} from "@/sheep/api/index";
import {xcxTopUp, subscribe} from "@/sheep/utils/wxUtil";
import {mapGetters, mapMutations} from "vuex";
import {updateWxInfo} from "@/sheep/api/baseApi";

export default {
    data() {
        return {
            info: '',
            showInfo: false,
            isCash: false,
            phone: "",
            showQrCode: false,
            showAudit: false,
            paramsPage: {
                pageNum: 1,
                pageSize: 10,
            },
            myInfoVo: {},
            showPhone: false,
            orderTab: [
                {name: "全部", imgUrl: "/static/img/order-11.png"},
                {
                    name: "进行中",
                    imgUrl: "/static/img/order-21.png",
                },
                {
                    name: "待结单",
                    imgUrl: "/static/img/order-31.png",
                },
                // { name: "购物车", imgUrl: "/static/img/order-4.png" },
            ],
            cash: {
                alipay: "",
                balance: "",
            },
            rules: {
                alipay: {
                    type: "string",
                    required: true,
                    message: "请填写收款账号",
                    trigger: ["blur", "change"],
                },
                balance: {
                    type: "number",
                    required: true,
                    message: "请填写提现金额",
                    trigger: ["blur", "change"],
                },
            },
        };
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        ...mapMutations({
            setUserInfo: "user/setUserInfo",
        }),
        onShowAll() {
            this.getPhone();
            // this.getIsCash();
            this.getMyInfo();
        },
        handleShowInfo() {
            console.log(1);
            if (this.userInfo.info) {
                this.info = this.userInfo.info;
            }
            this.showInfo = true
            console.log(1);
        },
        handleAvatar() {
            this.$refs.authRef.open(this.myInfoVo.nickName, this.myInfoVo.avatar);
        },
        handleCashRecord() {
            uni.navigateTo({
                url: "/pages/cashRecord/indexds",
            });
        },
        handleSubscribe() {
            subscribe(["u0c4ZyS0QbdYazizcN5Bscy0IUcA_DwOVkRcmw861sc"]).then(
                (res) => {
                }
            );
        },
        handleInfoConfirm() {
            if (!this.info) {
                uni.showToast({
                    title: "请填写简介",
                    icon: "none",
                });
                return
            }
            updateWxInfo({info: this.info}).then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                    this.showInfo = false
                    this.getMyInfo();
                }
            );
        },
        // 提现
        handleConfirm() {
            this.$refs.uForm
                .validate()
                .then((res) => {
                    auditApi(this.cash).then((res) => {
                        if (res.code === 200) {
                            this.showAudit = false;
                            this.getMyInfo();
                        }
                    });
                })
                .catch((errors) => {
                    console.log(errors);
                });
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.myInfoVo = res.data;
                this.setUserInfo(this.myInfoVo);
            });
        },
        copy(value) {
            uni.setClipboardData({
                data: value,
                success: function () {
                    uni.showToast({
                        title: "复制成功",
                        icon: "none",
                    });
                },
            });
        },
        goKf() {
            wx.openCustomerServiceChat({
                extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc94f7f122e00029ff'},
                corpId: 'ww946e84db1faa17ae',
                success(res) {
                    console.log(2222, res);
                },
                fail(res) {
                    console.log(333, res);
                }
            })
        },
        handleOrder(index) {
            uni.navigateTo({
                url: "/pages/examiners/examiners?type=" + index,
            });
        },
        handlerMyGoods(index) {
            if (index == 3) {
                uni.navigateTo({
                    url: "/pages/mine/myTransaction?type=3",
                });
            } else if (index == 2) {
                uni.navigateTo({
                    url: "/pages/mine/myTransaction?type=1",
                });
            } else if (index == 1) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=0",
                });
            } else if (index == 0) {
                uni.navigateTo({
                    url: "/pages/mine/goodRelease",
                });
            }
        },
        handleCall() {
            uni.makePhoneCall({
                phoneNumber: this.phone,
            });
        },
        goMine() {
            uni.switchTab({
                url: "/pages/mine/index",
            });
        },
        async getPhone() {
            let res = await getByKeyApi("phone");
            this.phone = res.data[0].configValue;
        },
        async getIsCash() {
            let res = await getByKeyApi("is_cash");
            this.isCash = res.data[0].configValue == 1;
        },
    },
};
</script>

<style lang="scss" scoped>
.mine {
    background-color: #f5f5f5;
    height: 100vh;
    position: relative;

    .custom {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 40rpx;
        font-weight: bolder;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .main {
        padding: 0 10rpx;

        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/minebg.png") no-repeat;
                background-size: 100% auto;
            }
        }
    }

    .index {
        padding: 30rpx;
        position: relative;
        z-index: 99;

        .info {
            font-size: 24rpx;
            color: #999999;
            display: flex;
            align-items: center;
        }

        .avatar {
            padding: 30rpx;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20rpx;

            .avatar-box {
                height: 50%;
                display: flex;
                margin-bottom: 20rpx;

                .userId {
                    margin-left: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .phonenumber {
                        display: flex;
                        align-items: center;
                        font-weight: 700;
                    }
                }
            }
        }

        .order {
            margin-top: 30rpx;
            padding: 30rpx;
            background-color: #fff;
            border-radius: 20rpx;

            .kefu {
                margin: 20rpx 0 30rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .kefu-left {
                    display: flex;
                    align-items: center;
                    font-size: 30rpx;
                }
            }
        }

        .title {
            font-size: 30rpx;
            font-weight: 700;
            margin-bottom: 20rpx;
        }

        .grid-text {
            margin: 16rpx 0;
            font-size: 24rpx;
        }
    }

    .qrcode {
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .phone {
            display: flex;
            align-items: center;
        }

        .desc {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
        }
    }
}

::v-deep .u-modal__content {
    display: unset !important;
}
</style>
